<template>
  <div class="loginbox">
    <div id="login" class="login">
      <div class="loginfirstdiv">
        <span id="s1" style="cursor: pointer" @click="turn1" class="spanactive">账号登陆</span>
        <span id="s2" style="cursor: pointer" @click="turn2">手机短信登陆</span>
        <span id="s3" style="cursor: pointer" @click="turn3">微信登陆</span>
      </div>
      <div style="margin: 20px;"></div>
      <el-form id="login1" label-position="right" label-width="90px" :model="accountloginFrom" ref="accountloginFrom"
               method="post" :rules="rules">
        <el-form-item prop="account">
          <el-input v-model="accountloginFrom.account" style="width: 450px;float: left;height: 80px"
                    placeholder="邮箱/账号/手机号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="accountloginFrom.password" style="width: 450px;float: left;height: 80px" placeholder="密码"
                    show-password></el-input>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%;height: 24px;">
            <span id="loginactive" @click="loginactive" class="atuo-login" style="cursor: pointer"><label
              style="font-size: 14px;text-align: left">下次自动登陆</label></span>
            <a class="forgetpassword" href="https://www.ketangpai.com/User/forgetpassword.html">忘记密码？</a>
          </div>
        </el-form-item>
        <el-form-item>
          <a href="#/Main">
            <el-button  @click="submitForm('accountloginFrom')" class="loginbutton">登陆</el-button>
          </a>
        </el-form-item>
        <el-form-item>
          <a style="float: right;margin-right: 80px;text-decoration: none;color: #818181" href="#/register">还没有账号？<label
            style="color: #569fe0">去注册</label></a>
        </el-form-item>
      </el-form>
      <div @click="turn3" class="weixin"></div>


      <el-form id="login2" class="hide" label-position="right" label-width="90px" :model="phoneloginFrom"
               ref="phoneloginFrom" :rules="rules">
        <el-form-item prop="input3">
          <el-input v-model="phoneloginFrom.input3" style="width: 450px;float: left;height: 80px"
                    placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item prop="input4">
          <el-input v-model="phoneloginFrom.input4" size="max" style="width: 300px;float: left;height: 80px"
                    placeholder="验证码"></el-input>
          <el-button style="float: left;height: 60px;margin-left: 30px">获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <div style="width: 100%;height: 24px;">
            <span id="loginactive1" @click="loginactive1" style="cursor: pointer" class="atuo-login"><label
              style="font-size: 14px;text-align: left">下次自动登陆</label></span>
            <a class="forgetpassword" href="https://www.ketangpai.com/User/forgetpassword.html">忘记密码？</a>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button @click="submitForm('phoneloginFrom')" class="loginbutton">登陆</el-button>
        </el-form-item>
        <el-form-item>
          <a style="float: right;margin-right: 80px;text-decoration: none;color: #818181" href="#/register">还没有账号？<label
            style="color: #569fe0">去注册</label></a>
        </el-form-item>
      </el-form>


    </div>
    <div id="weixinloginbox" class="hide"
         style="width: 506px;height: 435px;background-color: white;position: absolute;top: 80px;left: 500px">
      <h2 style="font-weight:500 ">微信登陆</h2>
      <img width="282px" height="282px" style="border: #818181 solid 1px" src="../../assets/二维码.png">
      <p>请使用微信扫描二维码登录 <br>“课堂派”</p>
      <div @click="turn1" class="weixinlogin">

      </div>
    </div>

  </div>
</template>

<script>
  import axios from "axios";
  import md5 from 'js-md5'
  import http from "../../utils/http";
  export default {
    name: "Login",

    methods: {
      turn1() {
        document.getElementById('s1').setAttribute('class', 'spanactive');
        document.getElementById('s2').removeAttribute('class');
        document.getElementById('s3').removeAttribute('class');
        document.getElementById('login1').removeAttribute('class');
        document.getElementById('login2').setAttribute('class', 'hide');
        document.getElementById('login').setAttribute('class', 'login');
        document.getElementById('weixinloginbox').setAttribute('class', 'hide');
      },
      turn2() {
        document.getElementById('s2').setAttribute('class', 'spanactive')
        document.getElementById('s1').removeAttribute('class');
        document.getElementById('s3').removeAttribute('class');
        document.getElementById('login2').removeAttribute('class');
        document.getElementById('login1').setAttribute('class', 'hide');
      },
      turn3() {
        document.getElementById('s3').setAttribute('class', 'spanactive')
        document.getElementById('s2').removeAttribute('class',);
        document.getElementById('s1').removeAttribute('class');
        document.getElementById('login').setAttribute('class', 'hide');
        document.getElementById('weixinloginbox').removeAttribute('class');
      },
      loginactive() {
        if (this.login1) {
          document.getElementById('loginactive').setAttribute('class', 'atuo-loginactive');
          this.login1 = false;
        } else {
          document.getElementById('loginactive').removeAttribute('class');
          document.getElementById('loginactive').setAttribute('class', 'atuo-login');
          this.login1 = true;
        }
      },
      loginactive1() {
        if (this.login2) {
          document.getElementById('loginactive1').setAttribute('class', 'atuo-loginactive');
          this.login2 = false;
        } else {
          document.getElementById('loginactive1').removeAttribute('class');
          document.getElementById('loginactive1').setAttribute('class', 'atuo-login');
          this.login2 = true;
        }
      },
      submitForm(formName) {
        const _this=this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.accountloginFrom.password=md5(this.accountloginFrom.password)
            http.get('user/login', {userId:this.accountloginFrom.account,password:this.accountloginFrom.password})
              .then((response) => {
                if (response.data.code==200) {
                  this.$message.success(response.data.message)
                  let token=response.data.data;
                  //存储token
                  console.log(response.data.data)
                  _this.$store.commit('SET_TOKENN', token);
                  //存储user，优雅一点的做法是token和user分开获取
                  _this.$store.commit('SET_USER', token);
                  this.$router.push("/Main");
                } else {
                  this.$message({
                    type:'error',
                    message:'密码错误',
                  })
                }
              })

          } else {
            this.$message({
              type:'warning',
              message:'请输入账号密码或者输入格式错误',
            })
            return false;
          }
        });

      },

    },
    data() {
      let phoneNumber = /^(13[0-9]|17[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      let emailNumber = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      let account = /^\d{6,10}$/;
      let password = /^[a-zA-Z]\w{5,17}$/;
      var validEmail = (rule, value, callback) => {
        if (phoneNumber.test(value)) {
          callback();
        } else if (emailNumber.test(value)) {
          callback();
        } else if (account.test(value)) {
          callback();
        } else {
          callback(new Error("输入的邮箱/账号/手机号不合法"));
        }
      };
      var validPassword = (rule, value, callback) => {
        if (password.test(value)) {
          callback();
        } else {
          callback()
          // callback(new Error("以字母开头，长度在6~18之间，只能包含字母、数字和下划线"))
        }
      }
      var phoneValid = (rule, value, callback) => {
        if (phoneNumber.test(value)) {
          callback();
        } else {
          callback(new Error("输入的手机号不正确"))
        }
      }
      return {
        login1: true,
        login2: true,
        type: '',
        loginFlag:"",
        loginaccount: "",
        accountloginFrom: {
          account: '',
          password: '',
        },
        phoneloginFrom: {
          input3: '',
          input4: '',
        },
        account: [
          {
            account: '',
            password: '',
          },

        ],


        rules: {
          account: [
            {required: true, message: '请输入邮箱账号手机号', trigger: 'blur'},
            {validator: validEmail, trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {validator: validPassword, trigger: 'blur'},
          ],
          input3: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {validator: phoneValid, trigger: 'blur'},
          ],
          input4: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
          ],
        }
      }
    },
    created() {
      //this指的是当前的vue对象，把vue对象赋给_this
      // this.keyupEnter()//页面在创建时就调用键盘的回车事件，在结构代码中也可以不写@keyup.enter.native="handleAddBook"

      let that = this;
      document.onkeypress = function(e) {
        var keycode = document.all ? event.keyCode : e.which;
        if (keycode == 13) {
          that.submitForm("accountloginFrom")// 登录方法名
          return false;
        }
      };
      // const _this = this
      // http.get('/findAllAccount').then(function (resp) {
      //   //回调函数中的this指的是回调
      //   //把data数据赋给_this，即vue对象
      //   _this.account = resp.data
      // })

    },
  }

</script>

<style scoped>
  .loginbox {
    height: 750px;
    width: 1530px;
    background: url("https://www.ketangpai.com/Public/Home/img/login-bg2-01.jpg") no-repeat;
    position: relative;

  }

  .login {
    width: 600px;
    height: 600px;
    background-color: white;
    position: absolute;
    top: 50px;
    left: 460px;
  }

  .loginfirstdiv {
    width: 100%;
    height: 70px;
    padding-top: 30px;
  }

  .loginfirstdiv span {
    font-size: 20px;
    font-weight: 500;
    padding-right: 10px;
    border-right: ghostwhite solid 3px;
  }

  .spanactive {
    font-size: 30px !important;
    font-weight: 800;
    padding-right: 10px;
    border-right: ghostwhite solid 3px;

  }

  .hide {
    display: none;
  }

  .login .el-input__inner {
    height: 160px !important;

  }
</style>
<style>
  .login .el-input__inner {
    height: 62px !important;
  }

  .atuo-login {
    background: url("https://www.ketangpai.com/Public/Home/img/check000.png") left 1px no-repeat;
    font-size: 12px;
    padding-left: 20px;
    width: 92px;
    height: 24px;
    float: left;
    color: #818181;
    cursor: pointer;
  }

  .atuo-login:hover {
    background-position: left -34px;
    color: #569fe0;
  }

  .login .atuo-loginactive {
    background: url("https://www.ketangpai.com/Public/Home/img/check000.png") left -69px no-repeat;
    font-size: 12px;
    padding-left: 20px;
    width: 92px;
    height: 24px;
    float: left;
    color: #818181;
  }

  .login .el-form-item__content {
    line-height: 25px;
  }

  .forgetpassword {
    float: right;
    margin-right: 90px;
    text-decoration: none;
    color: #818181;
  }

  .forgetpassword:hover {
    color: #569fe0;
  }

  .loginbutton {
    width: 440px;
    margin-right: 200px;
    background-color: #569fe0;
    font-size: 20px;
    color: white;
  }

  .loginbutton:hover {
    background-color: blue !important;
  }

  .weixin {
    width: 60px;
    height: 60px;
    background: url("https://www.ketangpai.com/Public/Home/img/wxloginqr.png") no-repeat;
    cursor: pointer;
    margin-left: 0px;
    position: absolute;
    top: 531px;
    left: 0px;
  }

  .weixin:hover {
    opacity: 0.6;
  }

  .weixinlogin {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 375px;
    left: 0px;
    background: url("https://www.ketangpai.com/Public/Home/img/qr-sj.png") 0 -80px no-repeat;
    transform: rotateY(180deg);
    border: 10px solid #fff;
    cursor: pointer;
  }

  .weixinlogin:hover {
    opacity: 0.8;
  }
</style>

